<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%  // 通过request获取相关资源信息，拼凑成完整的访问路径
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" +
            request.getServerPort() + request.getContextPath() + "/";
%>
<html>
<head>
    <title>异步数据验证</title>
    <base href="<%=basePath%>">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="icon" href="images/favicon.ico" type="image/x-icon" />
    <script type="text/javascript" src="jquery/jquery.min.js"></script>
    <script type="text/javascript" src="jquery/jquery.validate.min.js"></script>
    <script type="text/javascript" src="jquery/additional-methods.min.js"></script>
    <script type="text/javascript" src="jquery/Message_zh_CN.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
    <link href="bootstrap/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css" />
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        window.onload = function() {    // 动态事件绑定
            document.getElementById("mid").addEventListener("blur", function() {
                mid = document.getElementById("mid"); // 表单的参数内容
                if (mid) {  // msg参数有内容
                    xmlHttpRequest = new XMLHttpRequest(); // 获取Ajax操作对象
                    if (xmlHttpRequest.withCredentials) {   // 当前浏览器是否支持有Ajax操作
                        alert("对不起，您的浏览器不支持Aajx处理操作！");
                    } else {    // 现在支持有Ajax的处理操作
                        xmlHttpRequest.open("post", "check.action"); // 建立通讯连接
                        xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // 设置头信息
                        xmlHttpRequest.onload = function (env) {    // 接收响应数据
                            flag = xmlHttpRequest.responseText.trim(); // 响应数据
                            if (flag == "true") {
                                document.getElementById("midMsg").innerHTML = "<span class='success'>用户名可以使用！</span>"
                            } else {
                                document.getElementById("midMsg").innerHTML = "<span class='danger'>用户名重复！</span>"
                            }
                        }
                        xmlHttpRequest.send("mid=" + mid.value); // 发送请求参数
                    }
                }
            }, false);
        }
    </script>
</head>
<body>
<div>&nbsp;</div>
<div class="container">
    <div class="panel panel-info">
        <div class="panel-heading">
            <strong><img src="images/logo.png" style="height: 30px;">&nbsp;Ajax异步数据交互</strong>
        </div>
        <div class="panel-body">
            <form action="" class="form-horizontal" id="myform" method="post" enctype="multipart/form-data">
                <fieldset>
                    <div class="form-group" id="fileDiv">
                        <label class="col-md-2 control-label" for="mid">用户名：</label>
                        <div class="col-md-5">
                            <input type="text" name="mid" id="mid" class="form-control input-sm" placeholder="请输入注册用户ID...">
                        </div>
                        <div class="col-md-4" id="midMsg">*</div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-offset-2 col-md-5">
                            <button type="button" class="btn btn-sm btn-primary" id="sendBut"><span class="glyphicon glyphicon-open"/>&nbsp;发送</button>
                            <button type="reset" class="btn btn-sm btn-warning"><span class="glyphicon glyphicon-retweet"/>&nbsp;重置</button>
                        </div>
                    </div>
                </fieldset>
            </form>
        </div>
        <div class="panel-footer">
            <div style="text-align:right;">
                <strong>沐言科技（www.yootk.com） —— 新时代软件教育领导品牌</strong>
            </div>
        </div>
    </div>
</div>
</body>
</html>
